<template>
  <div class="courseContent">
    <!-- 轮播图的显示 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in activeAdList" :key="item.id">
        <img :src="item.img" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 课程内容的展示 -->
    <course-list :fetchData="fetchData"></course-list>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant'
import { getAllAds, getQueryCourses } from '@/services/course'
import courseList from '@/components/courseContentList'
export default {
  name: 'courseContent',
  components: {
    courseList,
    VanSwipe: Swipe,
    VanSwipeItem: SwipeItem
  },
  data () {
    return {
      // 轮播图片展示
      adsList: []
    }
  },
  created () {
    this.getAllAds()
  },
  computed: {
    // 筛选adsList的数组数据
    activeAdList () {
      return this.adsList.filter(item => item.status !== 0)
    }
  },
  methods: {
    async getAllAds () {
      const { data } = await getAllAds({
        spaceKeys: '999'
      })
      if (data.state === 1) {
        // 获取到所有的swiper图片,但是存在status=0的项的图片,就不应该显示出来,
        // 所以要通过computed 筛选数组
        this.adsList = data.content[0].adDTOList
      }
    },
    // 在父组件接收课程内容接口,传给子组件处理
    fetchData (options) {
      return getQueryCourses(options)
    }
  }
}
</script>

<style lang="scss" scoped>
.courseContent{
  overflow: hidden;
}
// 固定定位以后,元素无法移动
// 但是加上bottom后,就可以实现滚动
.courseContentList{
  top: 230px;
  bottom: 50px;
}
.my-swipe{
  width: 100%;
  height: 170px;
  .van-swipe-item{
    display: flex;
    justify-content: center;
    overflow: hidden;
    img{
      height: 100%;
    }
  }
}
</style>
